<template>
	<view class="">
		<view class="tl-navbar" :style="barStyle">
			<view class="tl-navbar-icon" v-if="showBack" @click="back">
				<u-icon name="arrow-left" color="#272727" size="19"></u-icon>
			</view>
			
			<view class="tl-navbar-icon" v-if="showHome" @click="toHome">
				<u-icon name="home" color="#272727" size="19"></u-icon>
			</view>

			<view class="tl-navbar-text" v-if="text">
				<u--text  :text="text" :bold="isTab"></u--text>
			</view>
		</view>
		<view class="tl-navbar-block" v-if="fixed" :style="blockStyle"></view>
	</view>


</template>

<script>
	import routerConfig from "@/common/routerConfig.js"
	export default {
		data() {
			return {}
		},
		created() {

		},
		computed: {
			barStyle() {
				const style = {
					'background-color': '#faad2a',
					height: uni.$u.addUnit(this.systemInfo.customBarHeight, 'px'),
				}
				if (!this.fixed) {
					style['margin-top'] = uni.$u.addUnit(this.systemInfo.statusBarHeight, 'px')
				} else {
					Object.assign(style, {
						'position': 'fixed',
						'padding-top': uni.$u.addUnit(this.systemInfo.statusBarHeight, 'px'),
						'left': '0',
						'top': '0',
						'width': '100vw',
						'z-index': '9908'
					})
				}

				if (this.isTab) {
					Object.assign(style, {
						'display': 'flex',
						'justify-content': 'center',
						'font-weight': '900',
					})
				} 
				// else {
				// 	Object.assign(style, {
				// 		'background-color': '#ffffff',
				// 	})
				// }


				if (this.customerStyle && typeof this.customerStyle == 'object') {
					Object.assign(style, this.customerStyle)
				}
				return uni.$u.addStyle(style, 'string')
			},
			blockStyle() {
				let style = {
					'height': uni.$u.addUnit(this.systemInfo.customBarHeight, 'px'),
					'margin-top': uni.$u.addUnit(this.systemInfo.statusBarHeight, 'px'),
					'width': '100%',
					// 'margin-bottom': '16rpx'
				}
				return uni.$u.addStyle(style, 'string')
			},
			isTab() {
				const pages = getCurrentPages();
				const currentUrl = pages[pages.length - 1].route.replace('/', '');
				return routerConfig.tabbarList.some((router) => {
					if (router.type === 'midButton') {
						return false
					}
					return router.pagePath.replace('/', '') == currentUrl
				})
			},
			showBack() {
				const pages = getCurrentPages();
				if (pages.length === 1) {
					return false
				}
				return !this.isTab
			},
			isOnePage() {
				const pages = getCurrentPages();
				return pages.length === 1
			},
			showHome() {
				return !this.isTab && this.isOnePage
			}
		},
		props: {
			text: [String, Boolean],
			customerStyle: Object,
			fixed: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			back() {
				const pages = getCurrentPages();
				let backUrl = pages[pages.length - 2].route
				if (backUrl.includes('pages/login/login')) {
					this.toHome()
				} else {
					this.$u.route({
						type: 'back'
					})
				}
			},
			toHome() {
				this.$u.route({
					url: '/pages/mainPage/homePage/homePage',
					type: 'reLaunch'
				})
			}
		}
	}
</script>

<style lang="scss">
	.tl-navbar {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// margin-bottom: 13rpx;

		&-icon {
			@include flex();
			align-items: center;
			justify-content: center;
			padding-right: 18rpx;
			padding-left: 14rpx;
			width: 50rpx;
			height: 50rpx;
		}

		&-text {
			height: 42rpx;
		}
	}
</style>
